<template>
  <div
    class="app-container flex flex-sub"
    style="background: none; height: 100%; padding: 1rem"
  >
    <el-card shadow="never" class="box-card flex-sub" style="overflow: auto">
      <div class="div-query">
        <div class="collapse">
          <div class="collapse-header" @click="panelActive = !panelActive">
            <i
              class="collapse-header-icon"
              :class="[
                panelActive ? 'el-icon-caret-bottom' : 'el-icon-caret-top',
              ]"
            />
            {{ panelActive ? '隐藏' : '展开' }}查询条件
          </div>
          <div class="collapse-content">
            <el-collapse-transition>
              <div v-show="panelActive">
                <el-form size="small" label-position="right">
                  <el-row>
                    <el-col :span="8">
                      <el-form-item label="设备名称" label-width="100px">
                        <el-input
                          v-model="searchModel.deviceName"
                          placeholder="输入设备名称"
                          clearable
                          class="filter-item search-item"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="设备序列号" label-width="100px">
                        <el-input
                          v-model="searchModel.sn"
                          placeholder="输入设备序列号"
                          clearable
                          class="filter-item search-item"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="7" style="margin-left: 10px">
                      <el-form-item>
                        <el-button
                          type="primary"
                          icon="el-icon-search"
                          @click="toSearch"
                          style="margin-right: 10px"
                          >搜索</el-button
                        >
                        <el-button
                          type="info"
                          icon="el-icon-delete"
                          @click="toReset"
                          style="margin-right: 10px"
                          >重置</el-button
                        >
                        <el-button size="small" @click="getDataList">
                          <i class="el-icon-refresh" style="color: #606266" />
                          <span style="color: #606266">刷新</span>
                        </el-button>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
              </div>
            </el-collapse-transition>
          </div>
        </div>
      </div>

      <div style="margin-bottom: 1rem">
        <el-button
          size="small"
          type="primary"
          style="margin-right: 20px"
          @click="toAdd({ id: -1 }, 'add')"
        >
          <i
            class="iconfont icon-xinzenghuizong"
            style="font-size: 13px; margin-right: 5px"
          />新增
        </el-button>

        <!-- <el-button
          size="small"
          type="primary"
          style="margin-right: 20px"
          @click="toAdd({ id: -1 }, 'add')"
        >
          <i
            class="iconfont icon-biangeng"
            style="font-size: 13px; margin-right: 5px"
          />变更设备状态
        </el-button> -->
      </div>

      <div>
        <el-table
          ref="elTable"
          v-loading="loading || deleteLoading"
          border
          fit
          size="medium "
          :data="dataList"
          :row-key="(row) => row.id"
          style="width: 100%"
          :element-loading-text="deleteLoading ? '删除中,请等待...' : ''"
          @sort-change="onSortChange"
          @selection-change="onSelectionChange"
        >
          <el-table-column
            align="center"
            type="index"
            width="50"
            fixed
            label="#"
            :index="indexMethod"
          />
          <af-table-column align="center" label="绑定场所" prop="placeName" />
          <af-table-column align="center" label="设备序列号" prop="sn" />
          <af-table-column align="center" label="设备名称" prop="deviceName" />
          <af-table-column align="center" label="设备类型" prop="typeName" />
          <af-table-column align="center" label="设备ip地址" prop="ip" />
          <af-table-column
            align="center"
            label="设备状态"
            prop="status"
            width="80"
          >
            <template slot-scope="{ row }">
              <el-tag
                size="medium"
                :style="
                  row.status | constantKeyTagStyleObj('EPIDEMICS_DEVICE_STATUS')
                "
              >
                {{ row.status | constantKeyValue('EPIDEMICS_DEVICE_STATUS') }}
              </el-tag>
            </template>
          </af-table-column>

          <el-table-column
            align="center"
            label="操作区"
            fixed="right"
            width="180"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="{ row }">
              <el-tooltip effect="dark" content="详情" placement="top-start">
                <i
                  class="iconfont icon-chakanxiangqing2 i-detail"
                  @click="toDetail(row)"
                />
              </el-tooltip>

              <i class="iconfont icon-fengefu i-fengefu" />

              <el-tooltip effect="dark" content="编辑" placement="top-start">
                <i
                  class="iconfont icon-bianji2 i-edit"
                  @click="toAdd(row, 'edit')"
                />
              </el-tooltip>

              <i class="iconfont icon-fengefu i-fengefu" />

              <el-tooltip effect="dark" content="删除" placement="top-start">
                <el-popconfirm
                  :title="'确定删除【' + row.deviceName + '】该设备吗？'"
                  placement="top"
                  @confirm="toSingleDelete(row, '确定')"
                  @cancel="toSingleDelete(row, '取消')"
                >
                  <i class="iconfont icon-shanchu i-delete" slot="reference" />
                </el-popconfirm>
              </el-tooltip>

              <i class="iconfont icon-fengefu i-fengefu" />

              <el-tooltip
                effect="dark"
                content="变更设备状态"
                placement="top-start"
              >
                <el-popconfirm
                  :title="'确定变更【' + row.deviceName + '】该设备的状态吗？'"
                  placement="top"
                  @confirm="toUpdateStatus(row, '确定')"
                  @cancel="toUpdateStatus(row, '取消')"
                >
                  <i
                    class="iconfont icon-custom-change i-edit"
                    slot="reference"
                  />
                  <!-- <el-button
                  type="primary"
                  size="small"
                  style="display: inline; padding: 5px 8px"
                  slot="reference"
                >
                  变更状态
                </el-button> -->
                </el-popconfirm>
              </el-tooltip>

              <i class="iconfont icon-fengefu i-fengefu" />

              <el-tooltip
                effect="dark"
                content="查看下发记录"
                placement="top-start"
              >
                <i
                  class="el-icon-s-promotion i-edit"
                  @click="toDistributionRecords(row)"
                />
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="pagination.pageNum"
          :limit.sync="pagination.pageSize"
          :page-sizes="pageSizeOptions"
          @pagination="getDataList"
        />
      </div>
    </el-card>

    <device-records-add
      ref="addDialog"
      :dialog-visible="addDialogObj.isVisible"
      :title="addDialogObj.title"
      :params="params"
      @close="dialogClose('addDialogObj')"
      @submit="afterSubmit"
      v-if="addDialogObj.isVisible"
    />

    <device-records-detail
      ref="detailDialog"
      :dialog-visible="detailDialogObj.isVisible"
      :title="detailDialogObj.title"
      :params="params"
      @close="dialogClose('detailDialogObj')"
      v-if="detailDialogObj.isVisible"
    />

     <device-send-face-records
      ref="sendFaceRecordsDialog"
      :dialog-visible="distributionRecordsDialogObj.isVisible"
      :title="distributionRecordsDialogObj.title"
      :item="params"
      @close="dialogClose('distributionRecordsDialogObj')"
      v-if="distributionRecordsDialogObj.isVisible"
    />

  </div>
</template>
<script>
import Pagination from '@/components/Pagination'
import dataTableMixins from '@/mixins/data-table-mixins'
import EpidemicPreventionManageApi from '@/api/epidemic-prevention-manage'
import DeviceRecordsAdd from './component/Add'
import DeviceRecordsDetail from './component/Detail'
import DeviceSendFaceRecords from './component/SendFaceRecords'
import deviceManageApi from '@/api/device-manage'
export default {
  components: {
    Pagination,
    DeviceRecordsAdd,
    DeviceRecordsDetail,
    DeviceSendFaceRecords
  },
  mixins: [dataTableMixins],
  data() {
    return {
      deleteLoading: false,
      placeList: [],
      deviceTypeList: [],

      distributionRecordsDialogObj: {
        title: '',
        isVisible: false,
      },
    }
  },
  mounted() {
    this.getPlaceList()
  },
  methods: {
    getPlaceList() {
      EpidemicPreventionManageApi.getAllPlaces()
        .then((res) => {
          if (res.data.code == 200) {
            this.placeList = res.data.data
          }
          this.getDeviceTypeList()
        })
        .catch((err) => {
          this.getDeviceTypeList()
        })
    },
    getDeviceTypeList() {
      const data = {
        dictId: 110,
      }
      deviceManageApi
        .getDictValueListById(data)
        .then((ret) => {
          this.deviceTypeList = ret.data
          this.getDataList()
        })
        .catch((err) => {
          this.getDataList()
        })
    },

    getDataList() {
      this.loading = true
      const searchModel = this.formatSearchData(this.searchModel)
      EpidemicPreventionManageApi.getDeviceList({
        ...this.pagination,
        ...searchModel,
        ...this.sort,
      })
        .then((res) => {
          if (res.data.code == 200) {
            this.dataList = res.data.data.rows
            this.dataList.forEach((ele) => {
              this.placeList.forEach((item) => {
                if (ele.placeId == item.id) {
                  ele.placeName = item.placeName
                }
              })

              this.deviceTypeList.forEach((item) => {
                if (ele.type == item.dictValue) {
                  ele.typeName = item.dictText
                }
              })
            })
            this.total = res.data.data.total
            this.loading = false
          }
        })
        .catch(() => {
          this.loading = false
          this.dataList = []
          this.total = 0
        })
    },
    toSearch() {
      this.pagination.pageNum = 1
      this.getDataList()
    },
    toReset() {
      this.searchModel = {}
      this.sort = {}
      this.$refs.elTable.clearSort()
      this.$refs.elTable.clearFilter()
      this.toSearch()
    },
    onSortChange(val) {
      this.sort.field = val.prop
      this.sort.order = val.order
      this.toSearch()
    },
    onSelectionChange(selection) {
      this.selectedDataList = selection
    },
    toEmptySelection() {
      this.$refs.elTable.clearSelection()
    },
    indexMethod(index) {
      return this.formatIndex(index, this.pagination)
    },
    toAdd(data, type) {
      this.params = {
        item: data,
        type: type,
      }
      this.addDialogObj.title =
        type === 'edit'
          ? '防疫管理 ＞设备记录 ＞编辑'
          : '防疫管理 ＞设备记录 ＞添加'
      this.addDialogObj.isVisible = true
    },
    afterSubmit(operationType) {
      if (operationType === 'add') {
        this.toReset()
      } else {
        this.getDataList()
      }
    },
    toSingleDelete(data, type) {
      if (type === '确定') {
        this.deleteConfirm(data.id, '')
      }
    },
    deleteConfirm(id) {
      this.deleteLoading = true
      const data = {
        id: id,
      }
      EpidemicPreventionManageApi.deleteDevice(data)
        .then((res) => {
          if (res.data.code == 200) {
            this.$message({
              message: '删除成功！',
              type: 'success',
            })
            this.deleteLoading = false
            this.toEmptySelection()
            this.toReset()
          } else {
            this.$message({
              message: '删除失败！',
              type: 'error',
            })
            this.deleteLoading = false
          }
        })
        .catch((err) => {
          this.deleteLoading = false
        })
    },
    toDetail(data) {
      this.params = {
        item: data,
      }
      this.detailDialogObj.title = '防疫管理 ＞设备记录  ＞详情'
      this.detailDialogObj.isVisible = true
    },
    toUpdateStatus(data, type) {
      if (type === '确定') {
        EpidemicPreventionManageApi.updateStatus({
          id: data.id,
          status: data.status == 1 ? 2 : 1,
        }).then((res) => {
          if (res.data.code == 200) {
            this.$message({
              message: '变更设备状态成功！',
              type: 'success',
            })

            this.toReset()
          } else {
            this.$message({
              message: '变更设备状态失败！',
              type: 'error',
            })
          }
        })
      }
    },

    toDistributionRecords(data) {
      this.params = {
        item: data,
      }
      this.distributionRecordsDialogObj.title =
        '防疫管理 ＞设备记录  ＞下发记录'
      this.distributionRecordsDialogObj.isVisible = true
    },
  },
}
</script>


<style lang="scss"  scoped>
@import '../../../../styles/part-custom';
</style>